import {defineComponent, reactive, ref} from "vue";
import style from "./css/index.module.css"
import {CommentsStore} from "@/stores/comments";
import {storeToRefs} from "pinia";
import Pagination from "@/components/Pagination";
import {userStore} from "@/stores/user";
import {ElMessage} from "element-plus";

export default defineComponent({
    props: {
        info_id: {
            type: Number,
            default: undefined
        },
        cat_id: {
            type: Number,
            default: undefined
        }
    },
    setup(props) {
        const comment_store = CommentsStore()
        const user_store = userStore()
        const {commentsList,commentsInfo} = storeToRefs(comment_store)
        const {userInfo} = storeToRefs(user_store)
        const commentInput = ref('')
        const queryParams = reactive({
            info_id: props.info_id,
            cat_id: props.cat_id
        })
        const total = ref(0)
        const initList = async () => {
            const res = await comment_store.getCommentsList(queryParams)
            total.value = res.total

        }

        const handleCurrentChange = (val) => {
            queryParams.pageNum = val
            initList()
        }

        const handleComment = async () => {
            commentsInfo.value.info_id = props.info_id
            commentsInfo.value.cat_id = props.cat_id
            const res = await comment_store.addComments()
            if(res){
                ElMessage.success("评论成功！")
                initList()
            }
        }
        initList()
        return () => {
            const list = commentsList.value.map(item => {
                return <div className={style.commentItem}>
                    <div className={style.img}>
                        <img src="https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@1280w_1l_2o_100sh.jpg" alt=""/>
                        <div className={style.nick_name}>{item.user_info.nick_name}</div>
                    </div>
                    <div className={style.text}>
                        <div className={style.info}>{item.comment_content}</div>
                        <div className={style.time}>2021-08-08 12:12:12</div>
                    </div>
                </div>
            })
            return <>
                <div className={style.title}>用户评论</div>
                <div className={style.content}>
                    <div className={style.commentList}>
                        {list}
                    </div>
                    <Pagination
                        handleCurrentChange={handleCurrentChange}
                        total={total.value}
                    />
                </div>
                <div className={style.title} style={{marginBottom:"20px"}}>发布评论</div>
                <div className={style.commentItem} style={{border:'none'}}>
                    <div className={style.img}>
                        <img src="https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@1280w_1l_2o_100sh.jpg" alt=""/>
                        <div className={style.nick_name}>{userInfo.value.nick_name}</div>
                    </div>
                    <div className={style.text}>
                        <el-input
                            v-model={commentsInfo.value.comment_content}
                            autosize={{minRows: 3}}
                            type="textarea"
                            placeholder="请输入评论"
                        />
                        <div className={style.btn}>
                            <el-button type="primary" onclick={handleComment}>评论
                            </el-button>
                        </div>

                    </div>
                </div>
            </>
        }
    }
})